﻿@{
    ViewBag.Title = "Manage Categories";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@model DirigoEdge.Areas.Admin.Models.ViewModels.ManageCategoriesViewModel

<div class="row">
    <div class="twelve columns">
        <h3>Manage Categories</h3>
        
        <a id="NewBlogPage" class="button newManageButton mobileBlockStatic mobileMarginBottom" data-reveal-id="AddCategoryModal" href="#">New Category +</a>

        <table class="twelve bordered manageTable" id="CategoriesTable">
            <thead>
                <tr>
                    <th class="hide-for-small">Id</th>
                    <th>Name</th>
                    <th class="actions">Actions</th>
                </tr>
            </thead>
            
            <tbody>
                @{
                    foreach (var cat in Model.BlogCategories)
                    {
                        <tr>
                            <td class="id hide-for-small">@cat.CategoryId</td>
                            <td class="name">@cat.CategoryName</td>
                            <td>
                                <a class="deleteCategoryButton button small" href="#" data-id="@cat.CategoryId">Delete</a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

@section Modals {
    <div id="AddCategoryModal" class="reveal-modal">
        <div class="wrapper">
            <h2>New Category</h2>
            <p class="lead">Create a new blog category.</p>
        
            <label>Category Name : </label><input id="CategoryNameInput" type="text" autocomplete="off"/>

            <a id="ConfirmAddCategory" class="right button confirmModalButton tabletMarginBottom tabletBlockStatic">Add</a>
            <a class="right button secondary" onclick="$('#AddCategoryModal').trigger('reveal:close');">Cancel</a>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="DeleteCategoryModal" class="reveal-modal">
        <div class="wrapper">
            <h2>New Category</h2>
            <p class="lead">Are you sure you want to delete this category?</p>

            <p><span id="popTitle"></span>will be <em>permanently</em> deleted.</p>

            <a id="ConfirmDeleteCategory" class="right button confirmModalButton">Confirm</a>
            <a class="right button secondary" onclick="$('#DeleteCategoryModal').trigger('reveal:close');">Cancel</a>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>
}

@section Scripts {
    @{
        // Only load if there is a good reason to
        if (Model.BlogCategories.Count > 0)
        {
            <script src="/Areas/Admin/Scripts/jquery/plugins/jquery.dataTables.min.js"></script>

            <script>
                $(document).ready(function () {
                    $("table.manageTable").dataTable({
                        "iDisplayLength": 25,
                        "aoColumnDefs": [
                            { "bSortable": false, "aTargets": ["actions"] } // No Sorting on actions
                        ],
                        "aaSorting": [[0, "desc"]] // Sort by id
                    });
                });
            </script>
        }
    }
}